<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="login-box">
					<view class="logo">
						<image src="/static/login/logo.png"></image>
					</view>
					<view class="close-btn">
						<image src="/static/login/close.png"></image>
					</view>
					<view class="login-tips flexWarpCenterColumn">
						<text class="welcome">嗨小爱台球研习社</text>
						<text>授权登录，轻松打球</text>
					</view>
					<view class="login-cont">
						<!-- <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="head-img" :src="avatarUrl"></image>
						</button> -->
						<!-- <view class="input-box">
							<input placeholder="昵称" type="nickname" v-model="nickname" placeholder-class="placeholderClass"/>
						</view> -->
						<!-- <view class="input-box">
							<input placeholder="昵称" v-model="nickname" disabled placeholder-class="placeholderClass" @tap="getUserProfile()"/>
						</view> -->
						<view class="input-box">
							<input placeholder="手机号" placeholder-class="placeholderClass" v-model="telNum" maxlength="11"/>
						</view>
						<!-- <button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="input-box button" v-else>
							手机号
						</button> -->
						<view class="login-btn" @tap="register(1)">确定</view>
					</view>
				</view>
				<view class="coupon-box" v-if="couponShow">
					<view class="coupon-cont">
						<view class="coupon-head">
							{{couponList[0].activity_name||'加载中...'}}
						</view>
						<view class="coupon-padd">
							<view class="coupon-item flexWrap" :class="{one:couponLenth==1,two:couponLenth==2}" v-for="(item,index) in couponList" :key="index" v-if="index<=3">
								<view class="coupon-left">
									<view>{{item.title}}</view>
								</view>
								<view class="coupon-right">
									x{{item.num}}
								</view>
							</view>
						</view>
					</view>
					<view class="receive-btn" @tap="receiveCoupon()">开心收下</view>
				</view>
				<view class="mask-box" v-if="couponShow"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				avatarUrl:"",
				avatarUpload:"",
				nickname:"",
				gender:"",
				telNum:"",
				telCode:"",
				wxCode:"",
				openid:"",
				headimg:"",
				couponShow:false,
				couponList:[],
				couponLenth:0,
			}
		},
		onLoad() {
			let url =window.location.href
			this.wxCode = ""
			// 截取code
			this.wxCode = this.$tools.queryUrlParams('code', url)
			console.log('code:'+this.wxCode)
			// 如果有code则请求
			if (this.wxCode) {
				console.log('进入了')
				this.getOpenid();
			} else {
				console.log('跳转授权')
				let url = encodeURIComponent('https://xiaoai.xxb.ren/h5/#/pages/login/login')
				window.location.href =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxcd28375b82352ae0&redirect_uri=" +
					url + "&response_type=code&scope=snsapi_userinfo&state=1_0#wechat_redirect"
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.uploadFilePromise(e.detail.avatarUrl)
			},
			uploadFilePromise(value) {
				console.log(value)
				let that = this
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let uploadUrl = this.$store.state.debug.getWay + this.$api.uploadImg
				uni.uploadFile({
					url: uploadUrl,
					filePath: value,
					fileType: "image",
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data).data
						console.log(data)
						that.avatarUpload = data.fullurl
					},
					complete: res => {
						uni.hideLoading()
						console.log(res)
					}
				});
			},
			// 获取微信用户code
			wechatLogin() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						that.wxCode=loginRes.code
						that.getOpenid();
					}
				});
			},
			getOpenid(){
				this.$request.post(this.$api.login, {
					code: this.wxCode
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						if(data.userinfo&&data.userinfo.token){
							uni.setStorageSync('token',data.userinfo.token)
							if(uni.getStorageSync('store_id')&&uni.getStorageSync('equipment_id')){
								uni.navigateTo({
									url:"/pages/home/billiardsDetails?equipment_id="+uni.getStorageSync('equipment_id')+'&store_id='+uni.getStorageSync('store_id')
								})
							}else{
								uni.switchTab({
									url:'/pages/home/index?store_id='+uni.getStorageSync('store_id')
								})
							}
						}else{
							this.openid=data.openid
							this.nickname=data.nickname
							this.headimg=data.headimgurl
						}
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 注册
			register(type){
				if(type==1&&!this.telNum){
					this.$tools.showToast('请将信息录入完整后登录');
					return;
				}else if(type==1&&this.telNum.length!=11){
					this.$tools.showToast('请输入正确的手机号');
				}
				this.$request.post(this.$api.register, {
					phone:this.telNum,
					code: this.wxCode,
					openid:this.openid,
					nickname:this.nickname,
					headimg:this.headimg
				}, {}).then(res => {
					console.log(res)
					if (res.code==1) {
						let {
							data = {}
						} = res;
						console.log(data)
						uni.setStorageSync('token', data.userinfo.token)
						if(uni.getStorageSync('store_id')&&uni.getStorageSync('equipment_id')){
							uni.navigateTo({
								url:"/pages/home/billiardsDetails?equipment_id="+uni.getStorageSync('equipment_id')+'&store_id='+uni.getStorageSync('store_id')
							})
						}else{
							uni.switchTab({
								url:'/pages/home/index?store_id='+uni.getStorageSync('store_id')
							})
						}
					}
				})
			},
			// 获取用户信息
			getUserProfile() {
				let that = this
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (infoRes) => {
						console.log(infoRes)
						that.avatarUrl=infoRes.userInfo.avatarUrl
						that.nickname=infoRes.userInfo.nickName
					},
					fail: (eorr) => {
						console.log(`getUserInfo 调用失败`);
					}
				})
			},
			// 获取用户手机号
			onGetPhoneNumber(e) {
				console.log("onGetPhoneNumber", e);
				this.telCode=e.detail.code
				this.getPhoneNum()
			},
			getPhoneNum(){
				this.$request.post(this.$api.getPhoneNum, {
					code: this.telCode
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let {
							data = {}
						} = res;
						console.log(data)
						this.telNum=data.phone.phone
					}
				})
			},
			login(){
				uni.reLaunch({
					url:'/pages/home/storeList'
				})
			},
			showCoupon(){
				this.couponShow=true
			},
			closeCoupon(){
				this.couponShow=false
			},
			// 获取新用户优惠券
			getNewCoupon(){
				this.$request.post(this.$api.newCoupon, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						for (let i in data) {
							data[i].num = data[i].sum
						}
						this.couponList=data
						this.couponLenth=this.couponList.length
						this.couponShow=true
					}else{
						this.couponShow=false
						uni.hideToast();
						uni.navigateBack({
							detail:1
						})
					}
				})
			},
			// 领取优惠券
			receiveCoupon(){
				this.$request.post(this.$api.receiveCoupon, {
					coupon:JSON.stringify(this.couponList),
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.closeCoupon();
						this.$tools.showToast('领取成功')
						uni.navigateBack({
							detail:1
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}
	button {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		line-height: 1;
		color: #FFFFFF;
		font-size: 28rpx;
		background: none;
		width: 100%;
		border: none;
	}
	page{
		background-color: #EEB94D;
	}
	.avatar-wrapper {
		border: 1upx solid #eee;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: auto;
	}
	.head-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.content{
		padding: 20upx;
	}
	.login-box{
		height: 836upx;
		background:#fff;
		border-radius: 16upx;
		margin-top: 340upx;
		position: relative;
		.logo{
			width: 406upx;
			height: 240upx;
			position: absolute;
			left: 0;
			right: 0;
			top: -100upx;
			margin: auto;
		}
		.close-btn{
			width: 48upx;
			height: 48upx;
			top: 20upx;
			right: 20upx;
			position: absolute;
		}
		.login-tips{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #BBBBBB;
			padding-top: 140upx;
			.welcome{
				font-size: 48upx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 66upx;
				color: #0F0F0F;
				margin-bottom: 18upx;
			}
		}
		.login-cont{
			padding:20upx 56upx;
			position: relative;
			z-index: 99;
			.input-box{
				height: 100upx;
				background:#F7F7F7;
				border-radius: 16upx;
				padding: 0 32upx;
				margin-top: 34upx;
				// &:nth-of-type(1){
				// 	margin-top: 0;
				// }
				input{
					height: 100upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 400;
					color:#333;
				}
				.placeholderClass{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 400;
					color:#838383;
				}
			}
			.button{
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:#838383;
				text-align: left;
				margin-top: 34upx;
			}
			.login-btn{
				width: 286upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				background: #FFB726;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
				margin: auto;
				margin-top: 56upx;
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.coupon-box{
		width: 646upx;
		height: 780upx;
		background:url('../../static/home/couponBox.png') no-repeat center/ 100% 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.coupon-cont{
			width: 425upx;
			border-radius: 10upx;
			position: absolute;
			top: 100upx;
			left: 0;
			right: 0;
			margin: auto;
			.coupon-head{
				color: #760D00;
				font-size:48upx;
				text-align: center;
				font-weight: bold;
				height: 106upx;
				line-height: 106upx;
			}
			.coupon-padd{
				padding-top: 20upx;
				.coupon-item{
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #DD1800;
					height: 68upx;
					line-height: 68upx;
					background: rgba(255,250,211,0.39);
					border-radius: 16upx;
					margin-top: 12upx;
					padding: 0 24upx;
				}
				.coupon-left{
					@include ellipsis(1);
				}
				.one{
					height: 146upx;
					line-height: 146upx;
					margin-top: 40upx;
				}
				.two{
					height: 98upx;
					line-height: 98upx;
					margin-top: 20upx;
				}
			}
		}
		.receive-btn{
			width: 340upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 50upx;
			background-color: #FDD56F;
			position: absolute;
			top: 546upx;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			color: #9F610F;
			font-size: 36upx;
			font-weight: 600;
		}
	}
</style>
